<template>
  <div>
    <!-- page选择 -->
    <el-aside
      v-show="pageMode === 'preview'"
      width="280px"
      class="common-container"
    >
      <PageTreeAside />
    </el-aside>

    <!-- 组件选择 -->
    <el-aside
      v-if="pageMode === 'module'"
      width="280px"
      class="common-container"
    >
      <ModuleAside :active-page-info="activePageInfo" />
    </el-aside>

    <!-- module预览 -->
    <el-aside width="375px" class="common-container">
      <PreviewMain :page-mode.sync="pageMode" :active-page-info="activePageInfo" />
    </el-aside>

    <!-- module编辑 -->
    <el-main
      v-if="
        pageMode === 'module' &&
          (activePageForm.activeModuleIndex ||
            activePageForm.activeModuleIndex == 0)
      "
      class="common-container"
      style="padding: 0"
    >
      <ModuleContent
        :page-mode.sync="pageMode"
        :active-page-info="activePageInfo"
      />
    </el-main>
  </div>
</template>

<script>
import PageTreeAside from './PageTreeAside'
import ModuleAside from './ModuleAside'
import PreviewMain from './PreviewMain'
import ModuleContent from './ModuleContent'
import { mapGetters } from 'vuex'

export default {
  components: {
    PageTreeAside,
    ModuleAside,
    PreviewMain,
    ModuleContent
  },
  data() {
    return {
      // 配置
      pageMode: 'preview', // 预览跟编辑   preview  module
      // 状态
      // 数据
      // activePageInfo: null,
      activePageInfo: {
        id: null,
        style: null,
        name: '请先选择页面'
      }
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['activePageForm'])
  },
  created() {
    this.$bus.on('wxaBuildModuleChoosePage', this.choosePage)
    this.$bus.on('wxaBuildModuleChangePageMode', this.changePageMode)
    this.$bus.on('wxaBuildModuleChangePageInit', this.changePageInit)
  },
  mounted() {
  },
  beforeDestroy() {
    this.$bus.off('wxaBuildModuleChoosePage', this.choosePage)
    this.$bus.off('wxaBuildModuleChangePageMode', this.changePageMode)
    this.$bus.off('wxaBuildModuleChangePageInit', this.changePageInit)
  },
  methods: {
    /**
     * 数据组
     */

    /**
     * 按钮组
     */
    // 选择页面
    choosePage(data) {
      if (data) {
        this.activePageInfo = data
      } else {
        this.activePageInfo = {
          id: null,
          style: null,
          name: '请先选择页面'
        }
      }
    },

    // 更改页面预览模式
    changePageMode(mode) {
      this.pageMode = mode
    },
    // 初始化页面信息
    async changePageInit() {
      const { modules } = this.activePageForm
      const selectedTypes = []
      await this.$store.dispatch('setSelectedTypes', [])
      modules.forEach(item => { selectedTypes.push(item.biz.type) })
      await this.$store.dispatch('setSelectedTypes', selectedTypes)
    }

    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 页面  */
.common-container {
  margin-left: 20px;
}

.el-aside,
.el-main {
  height: calc(100vh - 100px);
  border-radius: 4px;
}

// .preview-container {
//   flex: 1;
// }
// .form-container {
//   flex: 1 ;
// }
</style>
